// ignore_for_file: avoid_print

import 'package:fluent_ui/fluent_ui.dart';

const Widget spacer = SizedBox(height: 5.0);

class InputsPage extends StatefulWidget {
  const InputsPage({Key? key}) : super(key: key);

  @override
  _InputsPageState createState() => _InputsPageState();
}

class _InputsPageState extends State<InputsPage> {
  bool disabled = false;

  bool value = false;

  double sliderValue = 5;

  double get max => 9;

  final FlyoutController controller = FlyoutController();
  final FlyoutController dpController = FlyoutController();
  final ScrollController scrollController = ScrollController();

  @override
  void dispose() {
    controller.dispose();
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ScaffoldPage(
      header: PageHeader(
        title: const Text('Inputs showcase'),
        commandBar: ToggleSwitch(
          checked: disabled,
          onChanged: (v) => setState(() => disabled = v),
          content: const Text('Disabled'),
        ),
      ),
      content: SingleChildScrollView(
        controller: scrollController,
        padding: EdgeInsets.symmetric(
          horizontal: PageHeader.horizontalPadding(context),
        ),
        child: SizedBox(
          width: double.infinity,
          child: Wrap(
            spacing: 10,
            runSpacing: 10,
            children: [
              Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Mica(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: InfoLabel(
                      label: 'Interactive Inputs',
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Checkbox(
                            checked: value,
                            onChanged: disabled
                                ? null
                                : (v) => setState(() => value = v ?? false),
                            content: Text(
                              'Checkbox ${value ? 'on ' : 'off'}',
                              style: TextStyle(
                                color: FluentTheme.of(context).inactiveColor,
                              ),
                            ),
                          ),
                          ToggleSwitch(
                            checked: value,
                            onChanged: disabled
                                ? null
                                : (v) => setState(() => value = v),
                            content: Text(
                              'Switcher ${value ? 'on ' : 'off'}',
                              style: TextStyle(
                                color: FluentTheme.of(context).inactiveColor,
                              ),
                            ),
                          ),
                          RadioButton(
                            checked: value,
                            onChanged: disabled
                                ? null
                                : (v) => setState(() => value = v),
                            content: Text(
                              'Radio Button ${value ? 'on ' : 'off'}',
                              style: TextStyle(
                                color: FluentTheme.of(context).inactiveColor,
                              ),
                            ),
                          ),
                          spacer,
                          ToggleButton(
                            child: const Text('Toggle Button'),
                            checked: value,
                            onChanged: disabled
                                ? null
                                : (value) => setState(() => this.value = value),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              _buildButtons(),
              _buildSliders(),
              Mica(
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Column(
                    children: [
                      DropDownButton(
                        disabled: disabled,
                        controller: dpController,
                        contentWidth: 150,
                        leading: const Icon(FluentIcons.align_left),
                        title: const Text('Alignment'),
                        items: [
                          DropDownButtonItem(
                            title: const Text('Left'),
                            leading: const Icon(FluentIcons.align_left),
                            onTap: () {},
                          ),
                          DropDownButtonItem(
                            title: const Text('Center'),
                            leading: const Icon(FluentIcons.align_center),
                            onTap: () {},
                          ),
                          DropDownButtonItem(
                            title: const Text('Right'),
                            leading: const Icon(FluentIcons.align_right),
                            onTap: () {},
                          ),
                        ],
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 10),
                        child: Flyout(
                          content: Padding(
                            padding: const EdgeInsets.only(left: 27),
                            child: FlyoutContent(
                              padding: EdgeInsets.zero,
                              child: ListView(shrinkWrap: true, children: [
                                TappableListTile(
                                    title: const Text('New'), onTap: () {}),
                                TappableListTile(
                                    title: const Text('Open'), onTap: () {}),
                                TappableListTile(
                                    title: const Text('Save'), onTap: () {}),
                                TappableListTile(
                                    title: const Text('Exit'), onTap: () {}),
                              ]),
                            ),
                          ),
                          verticalOffset: 20,
                          contentWidth: 100,
                          controller: controller,
                          child: Button(
                            child: const Text('File'),
                            onPressed:
                                disabled ? null : () => controller.open = true,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildButtons() {
    const double splitButtonHeight = 25.0;
    return Mica(
      child: Padding(
        padding: const EdgeInsets.all(8),
        child: InfoLabel(
          label: 'Buttons',
          child:
              Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Button(
              child: const Text('Show Dialog'),
              onPressed: disabled
                  ? null
                  : () {
                      showDialog(
                        context: context,
                        builder: (_) => ContentDialog(
                          title: const Text('Delete file permanently?'),
                          content: const Text(
                            'If you delete this file, you won\'t be able to recover it. Do you want to delete it?',
                          ),
                          actions: [
                            Button(
                              child: const Text('Delete'),
                              onPressed: () {
                                // Delete file here
                              },
                            ),
                            Button(
                              child: const Text('Cancel'),
                              onPressed: () => Navigator.pop(context),
                            ),
                          ],
                        ),
                      );
                    },
            ),
            spacer,
            IconButton(
              icon: const Icon(FluentIcons.add),
              onPressed: disabled ? null : () => print('pressed icon button'),
            ),
            spacer,
            SizedBox(
              height: splitButtonHeight,
              child: SplitButtonBar(buttons: [
                Button(
                  child: SizedBox(
                    height: splitButtonHeight,
                    child: Container(
                      decoration: BoxDecoration(
                        color: disabled
                            ? FluentTheme.of(context).accentColor.darker
                            : FluentTheme.of(context).accentColor,
                        borderRadius: const BorderRadius.horizontal(
                          left: Radius.circular(4.0),
                        ),
                      ),
                      height: 24,
                      width: 24,
                    ),
                  ),
                  onPressed: disabled ? null : () {},
                ),
                IconButton(
                  icon: const SizedBox(
                    height: splitButtonHeight,
                    child: Icon(FluentIcons.chevron_down, size: 10.0),
                  ),
                  onPressed: disabled ? null : () {},
                ),
              ]),
            ),
            spacer,
          ]),
        ),
      ),
    );
  }

  Widget _buildSliders() {
    return Mica(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: InfoLabel(
          label: 'Sliders',
          child:
              Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Row(mainAxisSize: MainAxisSize.min, children: [
              Flexible(
                fit: FlexFit.loose,
                child: Column(children: [
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal: 8),
                    width: 200,
                    child: Slider(
                      max: max,
                      label: '${sliderValue.toInt()}',
                      value: sliderValue,
                      onChanged: disabled
                          ? null
                          : (v) => setState(() => sliderValue = v),
                      divisions: 10,
                    ),
                  ),
                  RatingBar(
                    amount: max.toInt(),
                    rating: sliderValue,
                    onChanged: disabled
                        ? null
                        : (v) => setState(() => sliderValue = v),
                  ),
                ]),
              ),
              Padding(
                padding: const EdgeInsets.all(8),
                child: Slider(
                  vertical: true,
                  max: max,
                  label: '${sliderValue.toInt()}',
                  value: sliderValue,
                  onChanged:
                      disabled ? null : (v) => setState(() => sliderValue = v),
                  // style: SliderThemeData(useThumbBall: false),
                ),
              ),
            ]),
          ]),
        ),
      ),
    );
  }
}
